<!--
 * @Description: 我的
 * @Author: xinqiao lxq1990.0716@qq.com
 * @Date: 2024-04-10
 * @LastEditors: xinqiao lxq1990.0716@qq.com
 * @LastEditTime: 2024-04-24
-->

<script lang="ts" setup>
  import { computed } from 'vue'

  import { myPng } from '@/enum/imageEnum'
  import { useUserInfoStore } from '@/stores/userInfo'
  import { checkLogin, validLogin } from '@/utils/auth'

  const userInfoStore = useUserInfoStore()

  /**
   * 路由跳转：个人信息
   */
  const goUserInfo = () => {
    if (!validLogin()) return
    uni.navigateTo({ url: '/pages_my/userInfo' })
  }

  /**
   * 路由跳转：隐私条款
   */
  const goPrivacy = async () => uni.navigateTo({ url: `/pages/sys/privacy` })

  /**路由跳转-我的报告 */
  const goReport = async () => uni.navigateTo({ url: `/pages/sys/reportList` })
  /**
   * 路由跳转：用户协议
   */
  const goProtocol = async () => uni.navigateTo({ url: `/pages/sys/protocol` })

  /** 是否登录 */
  const isLogin = computed(() => checkLogin())
</script>

<template>
  <view class="my">
    <image class="header" :src="myPng.header" />
    <view class="userInfo" @click="goUserInfo()">
      <image class="userInfo-avatar" :src="userInfoStore.headImg || myPng.avatar" />
      <text class="userInfo-name" v-if="isLogin">{{ userInfoStore.userName || '游客' }}</text>
      <text class="userInfo-phone" v-if="isLogin">{{ userInfoStore.phone }}</text>
      <text class="userInfo-unlogin" v-if="!isLogin">未登录</text>
      <image class="userInfo-arrow" :src="myPng.arrowRight" />
    </view>
    <view class="content">
      <view class="content-item" @click="goReport()">
        <image class="content-item-icon" :src="myPng.privacy" />
        <text class="content-item-text">我的健康资产</text>
        <image class="content-item-arrow" :src="myPng.arrowRight" />
      </view>
      <view class="content-item" @click="goPrivacy()">
        <image class="content-item-icon" :src="myPng.privacy" />
        <text class="content-item-text">隐私条款</text>
        <image class="content-item-arrow" :src="myPng.arrowRight" />
      </view>
      <view class="content-item" @click="goProtocol()">
        <image class="content-item-icon" :src="myPng.protocol" />
        <text class="content-item-text">用户协议</text>
        <image class="content-item-arrow" :src="myPng.arrowRight" />
      </view>
    </view>
  </view>
</template>

<style lang="less">
  .my {
    padding-top: 216rpx;
  }

  .header {
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
  }

  .userInfo {
    position: relative;
    height: 128rpx;

    .userInfo-avatar {
      position: absolute;
      top: 0;
      left: 32rpx;
      width: 128rpx;
      height: 128rpx;
      border-radius: 50%;
      border:2px solid #fff
    }

    .userInfo-name {
      position: absolute;
      top: 6rpx;
      left: 192rpx;
      font-size: 48rpx;
      font-weight: bold;
      line-height: 64rpx;
      color: #1d2129;
    }

    .userInfo-phone {
      position: absolute;
      bottom: 6rpx;
      left: 192rpx;
      font-size: 28rpx;
      line-height: 44rpx;
      color: #86909c;
    }

    .userInfo-unlogin {
      position: absolute;
      top: 32rpx;
      left: 192rpx;
      font-size: 48rpx;
      font-weight: bold;
      line-height: 64rpx;
      color: #1d2129;
    }

    .userInfo-arrow {
      position: absolute;
      top: 48rpx;
      right: 74rpx;
      width: 20rpx;
      height: 32rpx;
    }
  }

  .content {
    padding-top: 32rpx;
    margin-top: 48rpx;
    background: #fff;
    border-radius: 48rpx 48rpx 0 0;

    .content-item {
      position: relative;
      height: 112rpx;

      .content-item-icon {
        position: absolute;
        top: 32rpx;
        left: 32rpx;
        width: 48rpx;
        height: 48rpx;
      }

      .content-item-text {
        position: absolute;
        top: 32rpx;
        left: 112rpx;
        font-size: 32rpx;
        line-height: 48rpx;
        color: #1d2129;
      }

      .content-item-arrow {
        position: absolute;
        top: 48rpx;
        right: 74rpx;
        width: 20rpx;
        height: 32rpx;
      }
    }
  }
</style>
